<template>
	<el-dialog title="配置图片" :visible="value" :before-close="handleClose" width="800px" top="6vh" append-to-body
		id="image_dialog">
		<div class="title_container">
			<div class="title">预览</div>
			<label class="el-button el-button--primary" for="upload">上传新图片</label>
			<input id="upload" type="file" accept="image/png" style="display: none;" ref="upload"
				@change="handlerSubmitImage" />
		</div>
		<div class="image_content">
			<div class="size_select">
				<el-menu :default-active="size">
					<el-menu-item v-for="s of sizes" :key="s" :index="s" @click="size = s">
						<span slot="title">× {{ s }}</span>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="image_container">
				<el-image class="image" :src="Image(icon, type)"></el-image>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		name: "ImageDialog",
		props: ["value", "type", "icon"],
		emits: ["input"],
		components: {},
		data() {
			return {
				size: "64",
				sizes: ['40', '64', '100', '128', '256'],
			}
		},
		methods: {
			handleClose() {
				this.$emit("input", false);
			},
			Image(icon, type) {
				console.log(icon);
				return this.$img.image(type, this.size, icon + ".png");
			},
			handlerSubmitImage(e) {
				console.log("提交文件");
				var file = e.target.files[0];
				var formData = new FormData();
				formData.set("type", this.type);
				formData.set("fileName", this.icon);
				formData.set("file", file);
				this.$api.post("/image/save", formData).then((res) => {
					this.notice(res);
					this.handleClose();
				})
			},
			handlerOpenUpload() {
				this.$refs.upload.click();
			}
		}
	}
</script>

<style lang="less" scoped>
	#image_dialog {
		.title_container {
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: auto 20px;

			.title {
				width: 100px;
				text-align: center;
				font-size: 30px;
			}
		}

		.image_content {
			width: 90%;
			margin: auto;
			margin-top: 10px;
			border-radius: 4px;
			border: 1px solid #d8d8d8;
			display: flex;

			.size_select {
				height: 100%;
			}

			.image_container {
				height: 100%;
				margin: auto;

				.image {
					border: #d8d8d8 1px solid;
					min-width: 128px;
					min-height: 128px;
				}
			}
		}
	}
</style>